<template>
	<view>
		<uni-nav-bar @clickLeft="$tab.back()" fixed="true" left-icon="left" title="我的收藏" statusBar="true"
			:border="false" background-color="#FE6B39" color="#FFF" />

		<view class="px-20 py-32">
			<u-subsection :list="subsection" :current="subsectionIndex" active-color="#FFF" bg-color="#fff" fontSize="32rpx"
				@change="sectionChange"></u-subsection>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view v-if="subsectionIndex == 0" @click="goProdDetail(item)"
					class="item mt-28" v-for="(item,index) in list" :key="index">
					<view class="box flex">
						<image :src="globalConfig.imagePrefix + item.spuInfo.cover" mode=""></image>
						<view class="ml-32">
							<text class="text1 u-line-1">{{item.spuInfo.name}}</text>
							<text class="text2 u-line-1 mt-16">{{item.spuInfo.price}}</text>
						</view>
					</view>
					<view class="but"></view>
				</view>

				<view v-if="subsectionIndex == 1" @click="goStoreDetail(item)" class="item mt-28"
					v-for="(item,index) in list" :key="index">
					<view class="box flex">
						<image :src="globalConfig.imagePrefix + item.storeInfo.logo" style="width: 128rpx;height: 128rpx;" mode=""></image>
						<view class="ml-32 flex flex-col items-start justify-between" style="height: 128rpx;">
							<view class="flex justify-between items-center">
								<text class="text1 u-line-1">{{item.storeInfo.name}}</text>
								<u-icon name="arrow-right" color="#999" size="14"></u-icon>
							</view>
							<view class="flex items-center">
								<u-icon name="map-fill" color="#000" size="14"></u-icon>
								<text class="ml-24">{{item.storeInfo.address}}</text>
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subsection: ['商品收藏', '店铺收藏'],
				subsectionIndex: 0,
				list: [],
				globalConfig:getApp().globalData.config
			};
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			goProdDetail(item){
				this.$tab.nav(`/pages/commodity/detail?id=${item.relateId}&storeId=${item.storeInfo && item.storeInfo.id || null}`)
			},
			goStoreDetail(item){
				this.$tab.nav(`/pages/shops/detail?id=${item.relateId}`)
			},
			sectionChange(index) {
				this.subsectionIndex = index;
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					
					const res = await this.$Api.user.collectionList({
						pageNum: pullScroll.page,
						pageSize: 10,
						colType: this.subsectionIndex == 0 ? 2 : 1,
					})
					
					res.rows = res.rows || []
					
					this.list = this.list.concat(res.rows);
					
					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
		
	page{
		background-color: #F8F8F8;
	}



	.item {
		background-color: #FFFFFF;

		.box {
			padding: 20rpx;
		}

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
		}

		.text1 {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.text2 {
			font-size: 36rpx;
			font-weight: 400;
			color: #E3392A;
		}

		.text3 {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		//店铺
		.text4 {
			font-size: 28rpx;
			font-weight: 400;
			color: #E53E2A;
		}

		.text5 {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}


	}
	
	/deep/.u-subsection--button__bar {
		background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%) !important;
		color: #FFF !important;
	}

	.but {
		width: 100%;
		height: 16rpx;
		background: #F8F8F8;
	}
</style>